@extends('front.frame_layout')
@section('head')
    <title>会员注册</title>
    <link rel="stylesheet" href="{{asset('front/css/register.css')}}">
@endsection
@section('content')
    <div class="register">
        <!--pc注册头部-->
        <div class="pc-register-head  hidden-xs">
            <h2><img src="{{asset('front/img/ybjflogo.png')}}" onclick="window.location='{{route('login.page')}}'"
                     style="cursor: pointer" alt="logo"><span class="register-yhzc">用户注册</span>
                <p class="register-mbx">
                <span class="register-tx">
                    <i class="iconfont icon-1 u-i1"></i>填写注册信息
                </span>
                    <i class="iconfont icon-jiantouyou u-ir"></i>
                <span class="register-cg">
                    <i class="iconfont icon-num2_ u-i2"></i>注册成功
                </span>
                </p>
            </h2>
        </div>
        <!--app注册头部-->
        <div class="app-register-head visible-xs-block">
            <i class="iconfont icon-zuo"></i>手机注册
        </div>
        <!--注册表单-->
        <div class="register-body">
            <form id="reg_form" method="post" action="{{route('reg.act')}}">
                {!! csrf_field() !!}
                <h3 class="register-title">帐号信息</h3>
                <ul class="register-zhxx">
                    <li>
                        <span class="register-name hidden-xs"><i>*</i>用户名帐号：</span>
                        <input type="text" name="name" id="name" class="register-ipt register-yhm" placeholder="请输入用户名">
                        <p class="register-ts"></p>
                    </li>
                    <li>
                        <span class="register-name hidden-xs"><i>*</i>推荐人账号：</span>
                        <input type="text" name="pname" id="pname" class="register-ipt register-tjr"
                               value="{{empty($puser)?'':$puser->username}}" {{empty($puser)?'':'readonly'}}
                               placeholder="请输入推荐人用户名">
                        <p class="register-ts"></p>
                    </li>
                    <li>
                        <span class="register-name hidden-xs"><i>*</i>节点人账号：</span>
                        <input type="text" name="nname" id="nname" class="register-ipt register-tjr"
                               value="{{empty($nuser)?'':$nuser->username}}" {{empty($nuser)?'':'readonly'}}
                               placeholder="请输入节点人用户名">
                        <p class="register-ts"></p>
                    </li>
                    <li>
                        <span class="register-name hidden-xs"><i>*</i>会员等级：</span>
                        <select name="vip" id="vip" class="register-ipt">
                            <option value="">--请选择要注册的会员等级--</option>
                            @foreach($vips as $vip)
                                <option value="{{$vip->slug}}">{{$vip->name}}</option>
                            @endforeach
                        </select>
                        <p class="register-ts"></p>
                    </li>
                    <li>
                        <span class="register-name hidden-xs"><i>*</i>登录密码：</span>
                        <input type="password" name="pass" id="pass" class="register-ipt register-dlmm"
                               placeholder="请输入登录密码">
                        <p class="register-ts"></p>
                    </li>
                    <li>
                        <span class="register-name hidden-xs"><i>*</i>确认登录密码：</span>
                        <input type="password" name="repass" id="repass" class="register-ipt register-qrdlmm"
                               placeholder="请确认登录密码">
                        <p class="register-ts"></p>
                    </li>
                </ul>
                <h3 class="register-title">设置交易</h3>
                <ul class="register-szjy">
                    <li>
                        <span class="register-name hidden-xs"><i>*</i>交易密码：</span>
                        <input type="password" name="safepass" id="safepass" class="register-ipt register-jymm"
                               placeholder="请输入交易密码">
                        <p class="register-ts"></p>
                    </li>
                    <li>
                        <span class="register-name hidden-xs"><i>*</i>确认交易密码：</span>
                        <input type="password" name="resafepass" id="resafepass" class="register-ipt register-qrjymm"
                               placeholder="请确认交易密码">
                        <p class="register-ts"></p>
                    </li>
                    <li>
                        <span class="register-name hidden-xs"><i>*</i>真实姓名：</span>
                        <input type="text" name="realname" id="realname" class="register-ipt register-zsxm"
                               placeholder="请输入您的真实姓名">
                        <p class="register-ts"></p>
                    </li>
                    <li>
                        <span class="register-name hidden-xs"><i>*</i>邮箱：</span>
                        <input type="text" name="email" id="email" class="register-ipt register-sjh"
                               placeholder="请输入邮箱">
                        <p class="register-ts"></p>
                    </li>
                    <li>
                        <span class="register-name hidden-xs"><i>*</i>手机号：</span>
                        <input type="text" name="tel" id="tel" class="register-ipt register-sjh" placeholder="请输入手机号">
                        <p class="register-ts"></p>
                    </li>
                    <li>
                        <span class="register-name hidden-xs"><i>*</i>手机验证码：</span>
                        <input type="text" name="sms_code" id="sms_code"
                               class="register-ipt register-sjhyzm register-ipt-s" placeholder="手机验证码">
                        <input type="button" id="sendSmsCode" class="register-ipt register-ipt-s register-hqyzm"
                               value="获取验证码">
                        <p class="register-ts"></p>
                    </li>
                </ul>
                <div class="register-xy">
                    {{--<i class="iconfont icon-iconziti50"></i>--}}
                    <input type="checkbox" id="protocol" name="protocol">
                    我已阅读并同意<a href="javascript:void(0)"
                              onclick="contentDlg(1, '{{$protocol->content}}')">《{{$protocol->title}}》</a>
                    <p class="register-ts"></p>
                </div>
                <div class="register-ljzc-box">
                    <input type="submit" value="立即注册" class="register-ljzc">
                </div>
            </form>
        </div>
    </div>
@endsection
@section('footer')
    @include('front.coms.protocol-dialog')

    <script>
        //手机端返回上一步
        $('.icon-zuo').on('touchend click', function (e) {
            e.preventDefault();
            window.history.back();
        });

        //获得/失去焦点样式
        $('.register-body input').focus(function () {
            $(this).css({borderColor: "#35a2ff"})
        }).blur(function () {
            $(this).css({borderColor: ""})
        });

        $("#reg_form").validate({
            rules: {
                name: {
                    required: true,
                    rangelength: [5, 50],
                    username: true
                },
                pname: {
                    required: true,
                    rangelength: [5, 50],
                    username: true
                },
                nname: {
                    required: true,
                    rangelength: [5, 50],
                    username: true
                },
                vip: {
                    required: true
                },
                pass: {
                    required: true,
                    rangelength: [6, 30],
                },
                repass: {
                    required: true,
                    equalTo: "#pass"
                },
                safepass: {
                    required: true,
                    rangelength: [6, 30],
                },
                resafepass: {
                    required: true,
                    equalTo: "#safepass"
                },
                realname: {
                    required: true,
                    realname: true
                },
                email: {
                    required: true,
                    isEmail: true
                },
                tel: {
                    required: true,
                    isMobile: true
                },
                sms_code: 'required',
                protocol: {
                    required: true
                }
            },
            messages: {
                name: {
                    required: '请填写用户名',
                    rangelength: '用户名只能5位以上'
                },
                pname: {
                    required: '请填写推荐人用户名',
                    rangelength: '推荐人用户名只能5位以上'
                },
                nname: {
                    required: '请填写节点人用户名',
                    rangelength: '节点人用户名只能5位以上'
                },
                vip: {
                    required: '请选择用户注册等级'
                },
                pass: {
                    required: '请填写登录密码',
                    rangelength: '登录密码只能6-30位'
                },
                repass: {
                    required: '请确认登录密码',
                    equalTo: '登录密码两次输入不一致'
                },
                safepass: {
                    required: '请填写交易密码',
                    rangelength: '交易密码只能6-30位'
                },
                resafepass: {
                    required: '请确认交易密码',
                    equalTo: '交易密码两次输入不一致'
                },
                realname: {
                    required: '请填写您的真实姓名'
                },
                email: {
                    required: '请输入邮箱'
                },
                tel: {
                    required: '请输入手机号'
                },
                sms_code: {
                    required: '请填写短信验证码'
                },
                protocol: {
                    required: '请阅读并同意注册协议'
                }
            }
            , errorPlacement: function (error, element) {
                $(element).siblings('p').html(error);
                return false;
            },
            errorElement: "span",
            submitHandler: function (form) {
                $(form).ajaxSubmit({
                    dataType: "json",
                    type: "post",
                    beforeSend: function () {
                        $(".register-ljzc").addClass('yfs').attr('disabled', 'disabled');
                    },
                    success: function (data) {
                        $(".register-ljzc").removeClass('yfs').removeAttr('disabled');
                        if (data.code == 0) {
                            toastr["success"](data.msg);
                            setInterval(function () {
                                window.location = "{{route('login.page')}}";
                            }, 2000);
                        } else {
                            toastr["error"](data.msg);
                        }
                    }
                });
            }
        });


        $('#sendSmsCode').on('touchend click', function (e) {
            e.preventDefault();
            //手机号验证
            var tel = $("#tel").val();
            var rule = /^[1][34578][\d]{9}$/.test(tel);
            if (rule) {
                $("#tel").removeClass('error').siblings('p').html('')
            } else {
                $("#tel").addClass('error').siblings('p').html('请输入正确手机号');
                return false;
            }

            var self = $("#sendSmsCode");
            $.ajax({
                type: "POST",
                url: "/send-common-code/" + tel + "/" + "reg",
                dataType: "json",
                beforeSend: function () {
                    $('.register-hqyzm').addClass('yfs').attr('disabled', 'disabled');
                },
                success: function (data) {
                    if (data.code == 0) {
                        toastr.success(data.msg);
                        var num = 120, timer;
                        $(this).addClass('yfs').val('重新发送（' + num + '）');
                        timer = setInterval(function () {
                            num--;
                            $('.register-hqyzm').val('重新发送（' + num + '）');
                            if (num <= 0) {
                                clearInterval(timer);
                                $('.register-hqyzm').removeClass('yfs').removeAttr('disabled').val('获取验证码');
                            }
                        }, 1000);
                    }
                    if (data.code == 1) {
                        $('.register-hqyzm').removeClass('yfs').removeAttr('disabled').val('获取验证码');
                        toastr.error(data.msg);
                    }
                }
            });
        });

        $('.register-xy i').on('touchend click', function (e) {
            e.preventDefault();
            if ($(this).hasClass('icon-iconziti50')) {
                $(this).removeClass('icon-iconziti50').addClass('icon-xuanzhong');
                $("#protocol").val('agree');
            } else {
                $(this).removeClass('icon-xuanzhong').addClass('icon-iconziti50');
                $("#protocol").val('');
            }
        });

    </script>
@endsection
